import{d as t,M as d,A as i,h as a}from"./Anchors-CRD96j4l.js";import{D as c,a as l}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const s={path:"/nav/badge",name:"badge",title:"Badge 徽标"};function n(r){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...r.components};return d(a,{children:[d("div",{class:"sys-ctx-main-left",children:[d(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),s.title]}),d(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(c,{columns:2}),t(l,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Badge } from "cui-solid"

export default () => {
    return <Badge count={3}>
        <a href="#" class="demo-badge" />
    </Badge>
}`,scopes:void 0,children:t(e.p,{children:"最简单的使用方法。"})}),t(l,{id:"dot",title:"小红点",src:"2dot.demo.tsx",code:`import { Badge, Icon, Space } from "cui-solid"

export default () => {
    return <Space dir="h" size={24}>
        <Badge dot>
            <a href="#" class="demo-badge" />
        </Badge>
        <Badge dot>
            <Icon name="bell1" size={26} />
        </Badge>
        <Badge dot>
            <a href="#">可以是一个链接</a>
        </Badge>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:"小红点徽标"})}),t(l,{id:"overcount",title:"封顶数字",src:"3overcount.demo.tsx",code:`import { Badge, Space } from "cui-solid"

export default () => {
    return <Space dir="h" size={24}>
        <Badge count={100}>
            <a href="#" class="demo-badge" />
        </Badge>
        <Badge count={1000} overflowCount={999}>
            <a href="#" class="demo-badge" />
        </Badge>
    </Space>
}`,scopes:void 0,children:d(e.p,{children:["通过设置 overflowCount 属性设置一个封顶值，当超过时，会显示","${overflowCount}","+"]})}),t(l,{id:"alone",title:"独立使用及自定义样式",src:"4alone.demo.tsx",code:`import { Badge, Space } from "cui-solid"

export default () => {
    return <Space dir="h" size={50}>
        <Badge count={10} />
        <Badge count={10} class="demo-badge-alone"/>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:"独立使用及自定义样式"})}),t(l,{id:"text",title:"自定义内容",src:"5text.demo.tsx",code:`import { Badge, Space } from "cui-solid"

export default () => {
    return <Space dir="h" size={50}>
        <Badge text="new">
            <a href="#" class="demo-badge" />
        </Badge>
        <Badge text="hot">
            <a href="#" class="demo-badge" />
        </Badge>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:"设置 text 属性，可以自定义显示内容。"})}),t(l,{id:"status",title:"状态点",src:"6status.demo.tsx",code:`import { Badge, Space } from "cui-solid"

export default () => {
    return <Space dir="v">
        <Space dir="h">
            <Badge status="success" />
            <Badge status="error" />
            <Badge status="default" />
            <Badge status="processing" />
            <Badge status="warning" />
        </Space>

        <Space dir="v">
            <Badge status="success" text="Success"/>
            <Badge status="error" text="Error"/>
            <Badge status="default" text="Default"/>
            <Badge status="processing" text="Processing"/>
            <Badge status="warning" text="Warning"/>
        </Space>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:"用于表示状态的小圆点。"})}),t(l,{id:"color",title:"多彩徽标",src:"7color.demo.tsx",code:`import { Badge, Space } from "cui-solid"

export default () => {
    return <Space dir="v">
        <Badge color="blue" text="blue" />
        <Badge color="green" text="green" />
        <Badge color="red" text="red" />
        <Badge color="yellow" text="yellow" />
        <Badge color="pink" text="pink" />
        <Badge color="magenta" text="magenta" />
        <Badge color="volcano" text="volcano" />
        <Badge color="orange" text="orange" />
        <Badge color="gold" text="gold" />
        <Badge color="lime" text="lime" />
        <Badge color="cyan" text="cyan" />
        <Badge color="geekblue" text="geekblue" />
        <Badge color="purple" text="purple" />
        <Badge color="#2db7f5" text="#2db7f5" />
        <Badge color="#f50" text="#f50" />
    </Space>
}`,scopes:void 0,children:d(e.p,{children:["属性 ",t(e.code,{className:"sp-inline-code",children:"color"})," 可以设置更多预设的状态点颜色，或者自定义颜色。"]})}),t(l,{id:"type",title:"预设颜色",src:"8type.demo.tsx",code:`import { Badge, Space } from "cui-solid"

export default () => {
    return <Space dir="h" size={24}>
        <Badge count={5} type="primary">
            <a href="#" class="demo-badge" />
        </Badge>
        <Badge count={5} type="success">
            <a href="#" class="demo-badge" />
        </Badge>
        <Badge count={5} type="normal">
            <a href="#" class="demo-badge" />
        </Badge>
        <Badge count={5} type="info">
            <a href="#" class="demo-badge" />
        </Badge>
        <Badge count={5} type="error">
            <a href="#" class="demo-badge" />
        </Badge>
        <Badge count={5} type="warning">
            <a href="#" class="demo-badge" />
        </Badge>
    </Space>
}`,scopes:void 0,children:d(e.p,{children:["使用 ",t(e.code,{className:"sp-inline-code",children:"type"})," 属性，可以设置不同的颜色。"]})}),d(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),d(e.table,{className:"sp-table",children:[t(e.thead,{children:d(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),d(e.tbody,{children:[d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"count"}),t(e.td,{style:{textAlign:"left"},children:"徽标内显示的数量"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"dot"}),t(e.td,{style:{textAlign:"left"},children:"小圆点徽标"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"overflowCount"}),t(e.td,{style:{textAlign:"left"},children:"上限数量,超出显示overflowCount+"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"text"}),t(e.td,{style:{textAlign:"left"},children:"自定义内容"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"status"}),t(e.td,{style:{textAlign:"left"},children:"状态徽标"}),t(e.td,{style:{textAlign:"left"},children:"success | error | processing | warning | default"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"color"}),t(e.td,{style:{textAlign:"left"},children:"圆点徽标的颜色"}),t(e.td,{style:{textAlign:"left"},children:"blue | green | red | yellow | pink | magenta | volcano | orange | gold | lime | cyan | geekblue | purple"}),t(e.td,{style:{textAlign:"left"}})]}),d(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"type"}),t(e.td,{style:{textAlign:"left"},children:"不同类型显示不同颜色"}),t(e.td,{style:{textAlign:"left"},children:"primary | success | normal | info | error | warning"}),t(e.td,{style:{textAlign:"left"}})]})]})]})]}),`
`,`
`,`
`,t(i,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"dot",title:"小红点",src:"2dot.demo.tsx"},{id:"overcount",title:"封顶数字",src:"3overcount.demo.tsx"},{id:"alone",title:"独立使用及自定义样式",src:"4alone.demo.tsx"},{id:"text",title:"自定义内容",src:"5text.demo.tsx"},{id:"status",title:"状态点",src:"6status.demo.tsx"},{id:"color",title:"多彩徽标",src:"7color.demo.tsx"},{id:"type",title:"预设颜色",src:"8type.demo.tsx"},{id:"props",depth:2,title:"属性"}]})]})}function p(r={}){const{wrapper:e}=r.components||{};return e?t(e,{...r,children:t(n,{...r})}):n(r)}export{p as default,s as frontmatter};
